
import { Image, List } from 'antd-mobile';
import { getTimeDisplayText } from './utils';
import { getMessage } from '@inbiz/react';
import './style.less';
import { Key, ReactElement, JSXElementConstructor, ReactFragment, ReactPortal } from 'react';

export default function MessageList(props: { data: any[]; onClickItem: (item: any) => void; }) {
    const { data, onClickItem } = props;

    return (
        <List className='message-h5-list-wrapper'>
            {data?.map((item: { Id: Key | null | undefined; Icon: string | undefined; WapMsgTitle: any; MsgTime: string; Count: number; AllCount: number; GroupName: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | undefined; }) => (
                <List.Item
                    key={item?.Id}
                    prefix={
                        <Image
                            src={item?.Icon || null}
                            style={{ borderRadius: 24 }}
                            fit='cover'
                            width={48}
                            height={48}
                        />
                    }
                    onClick={() => { onClickItem(item) }}
                    description={item?.AllCount == 0 ? '' : (item?.WapMsgTitle || getMessage('Message.tips.noTemp'))}
                    extra={
                        <>
                            <div className='message-h5-list-item-time'>{item?.MsgTime ? getTimeDisplayText(item?.MsgTime) : ''}</div>
                            <div className='message-h5-list-item-count-wrapper'>
                                <div className='message-h5-list-item-count' style={{ padding: item?.Count ? '1px 4px' : 0 }}>
                                    {item?.Count ? item?.Count > 99 ? '99+' : item?.Count : ''}
                                </div>
                            </div>
                        </>
                    }
                >
                    {item?.GroupName}
                </List.Item>
            ))}
        </List>
    )
}
